import React from 'react'
import { sleep } from 'antd-mobile/es/utils/sleep'

const Component = () => {
  let [active, SetActive] = React.useState('all')
  let [page, SetPage] = React.useState(1)
  let [list, SetList] = React.useState([])
  let [hasMore, SethasMore] = React.useState(false)

  React.useEffect(() => {
    request()
  }, [])

  //订单请求
  const request = async () => {
    var data = {
      status: active == "all" ? '' : active,
      busid: React.Business.id,
      page
    }

    var result = await React.HTTP.post('order/index', data)

    if (result.code == 0) {
      //没有更多数据
      SethasMore(false)
      return false
    }

    SethasMore(true)
    SetPage(page + 1)
    SetList(list.concat(result.data))
  }

  //选项卡切换
  const TabChange = async (key: string) => {
    SetActive(key)

    await sleep(1000)
    await onRefresh()
  }

  // 下拉刷新
  const onRefresh = async () => {
    SetPage(1)
    SethasMore(true)
    SetList([])

    await sleep(1000)
    await request()
  }

  //上拉加载
  const loadMore = async () => {
    await sleep(1000)
    request()
  }

  // 申请退款
  const apply = async (orderid: any) => {
    var result = await React.UI.Dialog.confirm({
      content: '是否确认申请退款'
    })

    if (!result) return false

    // 发送请求
    var result = await React.HTTP.post('/order/apply', { orderid })

    if (result.code == 0) {
      React.error(result.msg, () => { })
      return false
    } else {
      React.success(result.msg, () => {
        onRefresh()
      })
    }
  }

  // 按钮结构
  const ButtonList = (order: any) => {
    if (order.status == '0') //未支付
    {
      return (
        <React.UI.Button color='primary' size='small' onClick={() => React.navigate(`/room/pay?orderid=${order.id}`)}>立即支付</React.UI.Button>
      )
    } else if (order.status == '1') //已支付
    {
      return (
        <React.UI.Button color='danger' size='small' onClick={apply.bind(this, order.id)}>申请退款</React.UI.Button>
      )
    }
  }

  return (
    <>
      <link rel="stylesheet" href="/assets/css/order.css" />

      {/* 选项卡切换 */}
      <React.UI.Tabs onChange={TabChange} activeKey={active} activeLineMode={'full'}>
        <React.UI.Tabs.Tab title="全部" key="all" />
        <React.UI.Tabs.Tab title="未支付" key="0" />
        <React.UI.Tabs.Tab title="已支付" key="1" />
        <React.UI.Tabs.Tab title="已入住" key="2" />
        <React.UI.Tabs.Tab title="已退房" key="3" />
        <React.UI.Tabs.Tab title="申请退款" key="-1" />
      </React.UI.Tabs>

      {/* 下拉刷新列表 */}
      <React.UI.PullToRefresh onRefresh={onRefresh}>
        {/* 订单列表 */}
        <div className='order_list'>
          {list && list.map((item: any, key: number) =>
            <div className="item" key={key}>
              <div className="item_top">
                <p>{item.room.name}</p>
                <div className="top_tag">{item.status_text}</div>
              </div>

              <div className="house">
                <div className="item_swipers">
                  <img src={item.room.thumb_text} alt="" />
                </div>
                <div className="item_times">
                  <div>
                    <div>{item.starttime_text}</div>
                    <div>{item.startday_text}</div>
                  </div>
                  <div>
                    <div>共{item.order_day}晚</div>
                    <div className="item_right">
                      <img src="/assets/images/right1.png" alt="" />
                    </div>
                  </div>
                  <div>
                    <div>{item.endtime_text}</div>
                    <div>{item.endday_text}</div>
                  </div>
                  <div>
                    <div className="item_pay">订单总价</div>
                    <div className="item_price">￥{item.price}</div>
                  </div>
                </div>
              </div>

              <div className="item_bar">
                {ButtonList(item)}

                <React.UI.Button color='warning' size='small' onClick={() => React.navigate(`/order/info?orderid=${item.id}`)}>
                  {(item.status == '3' && (!item.comment && !item.rate)) ? '立即评价' : '查看详情'}
                </React.UI.Button>
              </div>
            </div>
          )}
        </div>

        {/* 上拉加载 */}
        <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />
      </React.UI.PullToRefresh>
    </>
  )
}

export default Component
